<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹出层-popup</title>
		<link rel="shortcut icon" href="/public/image/favicon.png">
		<link rel="stylesheet" type="text/css" href="/public/style/cssreset-min.css">
		<link rel="stylesheet" type="text/css" href="/public/style/common.css">
		<style type="text/css">
			.popup{
				margin-bottom: 25px;
			}
			.style1 a{
				text-decoration: none;
			}
			.style1 .trigger{
				display: block;
				width:80px;
				height:30px;
				background: #ccc; 
				line-height: 30px;
				text-align: center;
				color:#333;
			}
			.style1 ul{
				width: 200px;
				background: #aaa;
			}
			.style1 li{
				line-height: 28px;
				text-align: center;
			}
		</style>
		<script type="text/javascript" src="/public/script/jquery.min.js"></script>
		<script type="text/javascript" src="/code/jquery.popup.js"></script>
	</head>
	<body>
		<div class="header">
            <a href="https://github.com/mumuy/widget" target="_blank">项目地址</a>
            <a href="/">返回首页</a>
        </div>
		<div class="main">
			<div class="popup style1 popup1">
				<div><a class="trigger" href="javascript:;">菜单</a></div>
				<ul>
					<li><span>菜单项1</span></li>
					<li><span>菜单项2</span></li>
					<li><span>菜单项3</span></li>
					<li><span>菜单项4</span></li>
					<li><span>菜单项5</span></li>
				</ul>	
			</div>
			<div class="code">
				<p>触发点下边与弹出层上边水平居中对齐</p>
				<p>$('.popup1').popup({trigger:'.trigger',triggerType:'mouse',node:'ul'});</p>
			</div>
			<script type="text/javascript">
				$('.popup1').popup({trigger:'.trigger',triggerType:'mouse',node:'ul'});
			</script>
			<div class="popup style1 popup2">
				<div><a class="trigger" href="javascript:;">菜单</a></div>
				<ul>
					<li><span>菜单项1</span></li>
					<li><span>菜单项2</span></li>
					<li><span>菜单项3</span></li>
					<li><span>菜单项4</span></li>
					<li><span>菜单项5</span></li>
				</ul>	
			</div>
			<div class="code">
				<p>触发点右侧与弹出层左侧垂直居中对齐</p>
				<p>$('.popup2').popup({trigger:'.trigger',triggerType:'mouse',node:'ul',points:['rc','lc']});</p>
			</div>
			<script type="text/javascript">
				$('.popup2').popup({trigger:'.trigger',triggerType:'mouse',node:'ul',points:['rc','lc']});
			</script>
			<div class="popup popup3">
				<img class="small" src="image/test.jpg" width="100" height="100"/>
				<img class="big" src="image/test.jpg" width="180" height="180"/>
			</div>
			<div class="code">
				<p>触发点与弹出层居中对齐</p>
				<p>$('.popup3').popup({trigger:'.small',triggerType:'mouse',node:'.big',points:['cc','cc']});</p>
			</div>
			<script type="text/javascript">
				$('.popup3').popup({trigger:'.small',triggerType:'mouse',node:'.big',points:['cc','cc']});
			</script>
			<div class="example">
				<div class="call">
					<h1>调用方法：</h1>
					<p>$(selector).popup(options);</p>
				</div>
				<h2>options参数</h2>
				<table>
					<thead>
						<tr>
							<th width="150">参数</th>
							<th width="120">默认值</th>
							<th>说明</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>triggerType</td>
							<td>'mouse'</td>
							<td>触发事件类型</td>
						</tr>
						<tr>
							<td>trigger</td>
							<td>''</td>
							<td>触发的节点(选择器)</td>
						</tr>
						<tr>
							<td>node</td>
							<td>''</td>
							<td>弹出的节点(选择器)</td>
						</tr>
						<tr>
							<td>points</td>
							<td>['cb','ct']</td>
							<td>弹出层与参考节点的对齐方式,t(top),b(bottom),c(center),l(left),r(right)</td>
						</tr>
						<tr>
							<td>offset</td>
							<td>[0,0]</td>
							<td>有效值为 [n, m],points对齐后offset值,一般可用于微调,n和m分别表示对齐两个点在x,y坐标之间的偏移量</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<div style="display: none;">
			<script src="https://s11.cnzz.com/z_stat.php?id=1260218562&web_id=1260218562"></script>
		</div>
	</body>
<html>
